<!DOCTYPE HTML>
<html>
<head>
    {include file="common:meta"}
    <style>
        .query-content div{
            float: left;
            margin-right: 20px;
        }
        .btn-margin{
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="page-container">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div>
                <label class="control-label">
                    <label class="control-label">
                        <input type="text" class="form-control date-search" id="start_time" placeholder="">
                    </label>
                </label>
                <label class="control-label">
                    <label class="control-label">至</label>
                </label>
                <label class="control-label">
                    <label class="control-label">
                        <input type="text" class="form-control date-search" id="end_time" placeholder="">
                    </label>
                </label>
                <label class="control-label">
                    <select name="limit" class="form-control" id="limit">
                        <option value="10" selected>前10名</option>
                        <option value="25" >前25名</option>
                        <option value="50">前50名</option>
                    </select>
                </label>
                <button type="button" class="btn btn-primary" id="rank">自定义家族流水排行榜</button>
            </div>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>房间ID</th>
                    <th>房间名</th>
                    <th>族长ID</th>
                    <th>族长名</th>
                    <th>家族名称</th>
                    <th>流水</th>
                </tr>
                </thead>
                <tbody id="info">

                </tbody>
            </table>
        </div>
    </div>
</div>
{include file="common:footer"}
<script>

    $(document).on('ready', function(){
        getData();
    });
    $('#rank').click(function(){
        getData();
    });
    //时间搜索插件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        lay('.date-search').each(function () {
            laydate.render({
                elem: this,
                type: 'datetime',
                trigger: 'click'
            });
        });
    });

    function getData(){
        var start_time = $('#start_time').val();
        var end_time = $('#end_time').val();
        var limit = $('#limit').val();

        $.ajax({
            type: "get",
            url: "/FamilyRoomFlowingRankData",
            data:{
                'start_time':start_time,
                'end_time':end_time,
                'limit':limit
            } ,
            dataType: 'JSON',
            success: function (re) {
                if (re.code === 100) {

                    var htmlElement = '';
                    var data = re.data;
                    for(var i in data){
                        htmlElement +=  "<tr><td>"+ data[i].r_id + "</td><td>"+ data[i].r_name +"</td><td>"+ data[i].u_id +"</td><td>"+ data[i].nickname +"</td><td>"+ data[i].f_name +"</td><td>"+ data[i].total +"</td></tr>";
                    }
                    $('#info').html(htmlElement);
                }else {
                    layer.msg('数据获取失败',{
                        icon:2,
                        time:1000
                    });
                }
            },
            error: function () {
                layer.msg('服务器出小差了',{
                    icon:2,
                    time:1000
                });
            }
        });
    }

</script>
</body>
</html>